import { Card } from 'antd';
import { useState } from 'react';

// 引入富文本编辑器组件
import { Editor } from 'react-draft-wysiwyg';
import { EditorState, convertToRaw } from 'draft-js';
// 用于将状态转成html文本
import draftToHtml from 'draftjs-to-html';
// 引入css文件
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const Rich = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const onEditorStateChange = (editorState: any) => {
    setEditorState(editorState);
    console.log(editorState);
  };

  return (
    <>
      <Card title="富文本编辑器">
        <Editor
          editorState={editorState}
          wrapperClassName="demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={onEditorStateChange}
        />

        {/* <textarea
          disabled
          value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
        /> */}

        <div
          style={{ border: '1px solid #000', height: 400 }}
          // dangerouslySetInnerHTML={{
          //   __html: draftToHtml(convertToRaw(editorState.getCurrentContent())),
          // }}
        >
          {draftToHtml(convertToRaw(editorState.getCurrentContent()))}
        </div>
      </Card>
    </>
  );
};

export default Rich;
